<template>
	<view class="bargin_container">
		<view class="detail_container">
			<view class="tagline">砍价福利大放送</view>
			<view class="tagline" style="margin-top: 10rpx;">惊喜停不下来</view>
			<view class="project_card">
				<view class="logo">
					<image src="http://applet.atptest.com/gmbc4l4a1719905682319.jpg?v=1719905682708"></image>
				</view>
				<view class="info">
					<view class="title">
						<view>检测项目：</view>
						<view style="flex: 1;">
							<text v-for="(item,index) in orderInfo.testItem" :key="index">
								<text>{{item.name}}</text>
								<text v-if="index != orderInfo.testItem.length-1">、</text>
							</text>
						</view>
					</view>
					<view class="time_price">
						<view style="font-size: 20rpx;">
							砍价时间：{{orderInfo.dateStar}}至{{orderInfo.dateEnd}}
						</view>
						<view style="color: #B30000;">
							￥{{orderInfo.orderTotal}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="activity_container">
			<view class="schedule">
				<view class="text1" v-if="!successFlag">
					新用户砍价即可获得限时免费外观检测券一张
				</view>
				<view class="text2" v-else>
					已帮好友成功助力<span style="color: red;"> {{bargainInfo.killAmount}} </span>元
				</view>
				<view class="progress_bar">
					<view class="complate_bar" :style="{width: ratio + '%'}"></view>
				</view>
			</view>
			<view v-if="!successFlag && accreditNum <= 5">
				<view class="bargain_btn" v-if="form.companyPhone" @click="bargainHandle()">马上砍一刀</view>
				<button open-type="getPhoneNumber" class="bargain_btn" @getphonenumber="getUserPhone"
					style="width: 100%;height: 100%;" v-else>
					马上砍一刀
				</button>
			</view>
			<view class="success_btn" @click="finish()" v-else>马上砍一刀</view>
			<view class="countTime" v-if="!successFlag">
				<view>
					还剩
				</view>
				<u-count-down :time="countDown" format="HH:mm:ss" style="margin: 10rpx 0;"></u-count-down>
				<view>
					后结束，快来帮好友砍一刀吧~
				</view>
			</view>
			<view class="explain_container">
				<view class="explain_title">
					活动说明
				</view>
				<view class="explain_content">
					<view class="item">
						1. 每个用户仅可帮助好友助力砍价一次；
					</view>
					<view class="item" style="margin: 20rpx 0;">
						2. 点击我要砍价可发起砍价活动；
					</view>
					<view class="item">
						3. 活动时间内砍价成功，即可享受活动价
					</view>
				</view>
			</view>
		</view>

		<view class="mask" v-if="modalFlag"></view>
		<view class="success_card" v-if="modalFlag">
			<view class="close_btn">
				<u-icon name="close" color="#fff" size="18" @click="closeHandle()"></u-icon>
			</view>
			<view class="success_text">
				<view style="font-size: 46rpx;">
					砍价成功！
				</view>
				<view style="font-size: 30rpx;margin-top: 24rpx;">
					您已成功为好友砍了
					<span style="color: #1242a6;font-weight: bold;font-size: 36rpx;"> {{bargainInfo.killAmount}}
					</span>元
				</view>
				<view style="font-size: 24rpx;margin-top: 30rpx;" v-if="newUserFlag">
					已为您发放限时无限次使用免费外观检测券
				</view>
			</view>
			<view class="buy_container">
				<view class="buy_btn" @click="buyHandle()">
					我也要下单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		UpdateUserInfo,
		GetUserInfo,
		AddWeChatPhone,
		GetWeChatPhone,
		GetWeChatPhoneCount,
	} from '../../../api/user.js'
	import {
		chopKnife,
		orderInfo,
		checkKnife
	} from "../../../api/bargain.js"
	export default {
		data() {
			return {
				successFlag: false,
				modalFlag: false,
				accreditNum: 0,
				form: {
					companyPhone: ""
				},
				orderId: "",
				orderInfo: {
					testItem: []
				},
				countDown: 0,
				bargainInfo: {
					amount: 0
				},
				ratio: 0,
				newUserFlag: false
			}
		},
		onLoad(options) {
			console.log("options：", options);
			if (options.orderId) {
				this.orderId = options.orderId
			}
		},
		onShow() {
			this.getWeChatPhoneCount()
			this.getUserInfo()
			this.getOrderInfo()
			this.checkKnife()
		},
		methods: {

			//判断该订单是否已被砍过
			async checkKnife() {
				const res = await checkKnife({
					orderId: this.orderId
				})
				console.log("判断", res);
				if (!res.check) { //check为false,不可以砍
					this.successFlag = true
					this.bargainInfo.killAmount = res.killAmount.toFixed(2)
					this.ratio = (res.amount / Number(this.orderInfo.orderTotal)) * 100
				} else {
					this.successFlag = false
					this.ratio = 0
				}
			},

			//获取订单信息
			async getOrderInfo() {
				const res = await orderInfo({
					orderId: this.orderId
				})
				console.log("订单信息", res);
				this.orderInfo = res
				this.countDown = 86400000 - (parseInt(new Date() - new Date(res.dateStar)))
			},

			// 获取用户信息
			getUserInfo() {
				GetUserInfo().then((res) => {
					this.form = res
					if (this.form.companyPhone == "") {
						this.newUserFlag = true
					} else {
						this.newUserFlag = false
					}
				})
			},

			//获取手机号授权次数
			getWeChatPhoneCount() {
				GetWeChatPhoneCount().then((res) => {
					console.log("手机号授权次数", res);
					this.accreditNum = Number(res)
				})
			},

			//获取用户手机号
			getUserPhone(e) {
				console.log("手机code", e.detail.code);
				AddWeChatPhone().then() //授权次数加1
				if (e.detail.code) {
					this.getWeChatPhone({
						code: e.detail.code
					})
				} else {
					wx.showToast({
						title: '已取消授权',
						icon: "none",
						duration: 1500,
						mask: true
					})
					setTimeout(() => {
						this.getWeChatPhoneCount()
					}, 50)
				}
			},
			//保存手机号
			getWeChatPhone(params) {
				GetWeChatPhone(params).then((res) => {
					console.log("用户手机号", res);
					if (res.data && res.data == false) {
						wx.showToast({
							title: '手机号授权失败',
							icon: "none",
							duration: 1500,
							mask: true
						})
					} else {
						this.form.companyPhone = res
						wx.showToast({
							title: '手机号授权成功',
							icon: "none",
							duration: 1500,
							mask: true
						})
						UpdateUserInfo({
							companyPhone: this.form.companyPhone,
						}).then((res) => {
							console.log("更新手机号", res);
							this.bargainHandle()
						})
					}
				})
			},

			finish() {
				if (this.accreditNum > 5) {
					wx.showToast({
						title: '今日已达授权上限',
						icon: "none",
						duration: 1500,
						mask: true
					})
				} else {
					wx.showToast({
						title: '已达砍价上限',
						icon: "none",
						duration: 1500,
						mask: true
					})
				}
			},

			//砍价
			async bargainHandle() {
				let req = {
					orderId: this.orderId,
				}
				const res = await chopKnife(req)
				if (res.code == 400) {
					return
				} else {
					this.modalFlag = true
					this.bargainInfo = res
					this.bargainInfo.killAmount = this.bargainInfo.killAmount.toFixed(2)
					this.ratio = (res.amount / Number(this.orderInfo.orderTotal)) * 100
					setTimeout(() => {
						this.successFlag = true
					}, 1000)
					this.getOrderInfo()
				}
			},

			//关闭弹框
			closeHandle() {
				this.modalFlag = false
			},

			//下单
			buyHandle() {
				uni.switchTab({
					url: '/pages/test/test'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bargin_container {
		width: 100%;
		height: 100%;
		position: relative;

		.detail_container {
			width: 100%;
			min-height: 460rpx;
			border-bottom-left-radius: 16rpx;
			border-bottom-right-radius: 16rpx;
			background: url("http://applet.atptest.com/dhrag3GO1719900299724.png?v=1719900299915") no-repeat;
			background-size: cover;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 64rpx 40rpx 20rpx 40rpx;
			box-sizing: border-box;
			position: fixed;
			top: 0;

			.tagline {
				font-size: 48rpx;
				font-weight: 900;
				color: #fff;
			}

			.project_card {
				width: 100%;
				border-radius: 12rpx;
				box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
				display: flex;
				padding: 12rpx;
				box-sizing: border-box;
				background-color: #fff;
				margin-top: 26rpx;

				.logo {
					width: 170rpx;
					height: 170rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					color: #000;
					margin-left: 20rpx;

					.title {
						font-size: 20rpx;
						color: #000;
						display: flex;
						font-weight: bold;
					}

					.time_price {}
				}
			}
		}

		.activity_container {
			height: calc(100vh - 440rpx);
			margin-top: 440rpx;
			background: linear-gradient(134.11deg, rgb(197, 249, 255) 4.079%, rgb(191, 200, 255) 100%);
			padding: 46rpx 52rpx;
			box-sizing: border-box;

			.schedule {
				width: 100%;
				height: 200rpx;
				border-radius: 44rpx;
				background: rgb(245, 254, 255);
				padding: 30rpx 40rpx;
				box-sizing: border-box;

				.text1 {
					width: 100%;
					font-size: 26rpx;
					text-align: center;
				}

				.text2 {
					width: 100%;
					font-size: 40rpx;
					text-align: center;
				}

				.progress_bar {
					width: 100%;
					height: 48rpx;
					border-radius: 32rpx;
					box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
					background: rgb(197, 246, 255);
					margin-top: 34rpx;

					.complate_bar {
						height: 100%;
						border-radius: 32rpx;
						background: linear-gradient(270.00deg, rgb(0, 39, 118) 59.821%, rgb(41, 66, 165) 100%);
						position: relative;
						transition: width 1s;
					}

					.complate_bar::before {
						position: absolute;
						content: "";
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						background-color: #fff;
						top: 10rpx;
						right: 20rpx;
					}

					.complate_bar::after {
						position: absolute;
						content: "";
						width: 6rpx;
						height: 6rpx;
						border-radius: 50%;
						background-color: #fff;
						top: 30rpx;
						right: 30rpx;
					}
				}
			}

			.success_btn {
				width: 100%;
				height: 100rpx;
				border-radius: 24rpx;
				background: #e5dadb;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 40rpx;
				margin-top: 52rpx;
			}

			.countTime {
				color: orangered;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				margin-top: 20rpx;
			}

			/deep/ .u-count-down {
				margin: 0 6rpx;
			}

			/deep/ .u-count-down__text {
				color: red !important;
			}

			.bargain_btn {
				width: 100%;
				height: 100rpx;
				border-radius: 24rpx;
				background: linear-gradient(270.00deg, rgb(1, 25, 110) 0%, rgb(63, 89, 191) 100%);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 40rpx;
				margin-top: 52rpx;
			}

			.bargain_btn {
				animation: hit .9s infinite alternate;
			}

			@keyframes hit {

				/*原图，放大一倍，再恢复到原图 */
				0% {
					transform: scale(0.9);
				}

				50% {
					transform: scale(1);
				}

				to {
					transform: scale(0.9);
				}
			}

			.explain_container {
				width: 100%;
				height: 326rpx;
				border-radius: 44rpx;
				background: rgba(255, 255, 255, .37);
				margin-top: 54rpx;
				padding: 32rpx 40rpx 40rpx 50rpx;
				box-sizing: border-box;
				color: #000;

				.explain_title {
					font-size: 36rpx;
					font-weight: 500;
				}

				.explain_content {
					margin-top: 20rpx;
					font-size: 30rpx;
				}
			}

		}

		.mask {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: #000;
			opacity: 0.4;
		}

		.success_card {
			position: absolute;
			width: 600rpx;
			height: 500rpx;
			top: 20%;
			left: 50%;
			margin-left: -300rpx;
			margin-top: -250rpx;
			border-radius: 16rpx;
			z-index: 99;
			animation: zoom 1s; // 整体出现放大再缩小效果

			.close_btn {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				z-index: 9999;
				animation: flipBack 0.1s;
			}

			.success_text {
				width: 100%;
				padding: 80rpx 0;
				box-sizing: border-box;
				background: url("http://applet.atptest.com/sOXCLUv01719976732639.png?v=1719976732979") no-repeat;
				background-size: cover;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #fff;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				animation: flipBack 0.7s;
				animation-delay: 0.2s;
				animation-fill-mode: forwards;
			}

			.buy_container {
				height: 30%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				animation: flipBack 0.7s;
				animation-delay: 0.2s;
				animation-fill-mode: forwards;

				.buy_btn {
					width: 80%;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #13aedd;
					color: #fff;
					border-radius: 16rpx;

				}
			}
		}

		@keyframes zoom {

			// 放大再缩小动画
			0% {
				opacity: 0;
				-webkit-transform: scale3d(0.1, 0.1, 0.1);
				transform: scale3d(0.1, 0.1, 0.1);
			}

			90% {
				opacity: 1;
				transform: scale3d(1.1, 1.1, 1.1);
			}

			100% {
				opacity: 1;
				transform: scale3d(1, 1, 1);
			}
		}

		@keyframes flipBack {

			// 翻转动画
			0% {
				opacity: 1;
				transform: rotateY(360deg);
			}

			50% {
				opacity: 1;
				transform: rotateY(20deg);
			}

			100% {
				opacity: 1;
				transform: rotateY(0deg);
			}
		}
	}
</style>